<template>
    <div class="account-list f-cb">
        <ul class="title-list f-cb">
            <li v-for="item in TitleList" :key="item.id" :class="ActiveTitleList==item.id?'active':''" @click="TitleChange(item.id)">
                {{item.name}}
                {{item.id==1?'('+positions.length+')':item.id==2?'('+entrust.length+')':''}}
            </li>
        </ul>
        <div class="list-infos">
            <div v-if="ActiveTitleList==1">
                <!-- 当前持仓 -->
               <current-position :tableData="positions" :type="types" @DescriptionOpen="DescriptionOpen"></current-position>
            </div>
            <div v-else-if="ActiveTitleList==2">
                <!-- 当前委托 -->
                <current-commission :tableData="entrust" :type="types" @RefreshList="RefreshList" @DescriptionOpen="DescriptionOpen"></current-commission>
            </div>
            <div v-else>
                <!-- 订单 -->
                <order :assetType="types" @DescriptionOpen="DescriptionOpen"></order>
            </div>
        </div>
        <el-dialog :visible.sync="DescriptionOpenShow" width="500px" :append-to-body="true" :show-close="false" custom-class="Description">
            <div slot="title" class="title_close">
            <div class="title">{{ $t('account.account_list.56hpy9kd12w0') }}</div>
            <img src="@/assets/img/icon_gb1.png" class="close" @click="ClosePopup('DescriptionOpenShow')" />
            </div>
            <p>{{$t('account.account_list.56hpy9kd2800')}}</p>
            <p>{{$t('account.account_list.56hpy9kd2j40')}}</p>
        </el-dialog>
    </div>
</template>
<script>
    import CurrentPosition from "@/components/account/table/CurrentPosition.vue";
    import CurrentCommission from "@/components/account/table/CurrentCommission.vue";
    import Order from "@/components/account/table/Order.vue";
    export default {
        props: ["StockList",'type'],
        components: {
            CurrentPosition,
            CurrentCommission,
            Order
        },
        data() {
            return {
                TitleList:[
                    {name:this.$t('account.account_list.56hpy9kd2s00'),id:1},
                    {name:this.$t('account.account_list.56hpy9kd30k0'),id:2},
                    {name:this.$t('account.account_list.56hpy9kd3a40'),id:3}
                ],
                ActiveTitleList:1,
                topHeight: null,
                positions:[],
                entrust:[],
                orderTabla:[],
                types:2,
                DescriptionOpenShow:false,
            }
        },
        mounted(){
            var _this = this;
        },
        methods: {
             //关闭弹框
            ClosePopup(msg){
                this[msg] = false;
            },
            DescriptionOpen(){
                this.DescriptionOpenShow =true;
            },
            TitleChange(id){
                this.ActiveTitleList =id;
            },
            RefreshList(){
                this.$emit('Accountclicks')
            },
        },
        watch:{
            StockList(val){
               this.positions = val.positions.list;
               this.entrust = val.entrust.list;
            },
            type(val){
                this.types = val
            }
        },
    }
</script>
<style lang="less">
    .title-list{
        width: 100%;
        border-bottom: 1px solid @LightBorderLine;
        li{
            float: left;
            margin:0 20px;
            color: @fbSix;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        li:hover,li.active{
            color: @hoverColor;
        }
    }
    .Description{
        margin: 0 !important;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        .el-dialog__body{
            h2{
                color: @fff;
                font-size: 14px;
                line-height: 24px;
                padding-left: 0;
                padding-bottom: 15px;
            }
            p{
                font-size: 12px;
                color: @fbSix;
                line-height: 20px;
            }
        }
    }
</style>